<!--
  Generated template for the CollectionPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="light">
    <ion-buttons start>
      <button ion-button (click)="dismissCLI()">
        <img src="assets/img/back.png" width='15' height='20'>
      </button>
    </ion-buttons>
    <ion-title *ngIf="!search">我的收藏</ion-title>
    <ion-buttons end style="text-align: right;" *ngIf="!search">
        <button ion-button (click)="searchby()">
            <ion-icon name="ios-search-outline"></ion-icon>
        </button>
      <button ion-button (click)="activationCLI()" *ngIf="activation == false">管理</button>
      <button ion-button (click)="activationokCLI()" *ngIf="activation == true">完成</button>
    </ion-buttons>
    <ion-buttons  style="text-align: right;" *ngIf="search">
        <ion-searchbar [(ngModel)]="content" (ionBlur)="change()" (ionChange)="searchC()"></ion-searchbar>
      <button ion-button (tap)="confirm()">搜索</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <div class="pageMenuSlides">
      <div class="swiper-container">
        <div class="swiper-wrapper" style="position:relative;">
          <div class="swiper-slide {{i==0?'bottomLine':''}}" *ngFor="let item of menus;let i=index;" tappable
            (click)="selectPageMenu(event,i)">{{item}}
          </div>
        </div>
      </div>
  </div>
  <ion-slides #contentSlides (ionSlideDidChange)="slideChanged()">
    <!-- 美图 -->
    <ion-slide>
      <div *ngIf="flag2==false" class="list">
        <ion-grid>
          <!-- 有内容 -->
          <ion-row>
            <ion-col col-4 class="mycollpid"  *ngFor="let value of collectionlist,let j=index" (click)="activation?selectCLI(j):showGoodsDetail(value.nail_id)">
              <img src="{{value.selectimg}}" class="imgcoll" *ngIf="activation==true">
              <div class="servicePic">
                  <img src="{{picrooturl}}{{value.nail_middle_url}}" width="100%" height="80%">
              </div>
              <span class="collection">{{value.nail_name}}</span>
            </ion-col>
          </ion-row>
      
          <ion-footer *ngIf="activation==true">
            <div class="footer-bar">
                <div class="footer-bar-left" (click)="activation?selectall():null">
                  <img src="assets/img/selectno1.png" class="selectall" alt="" *ngIf="!allof"/>
                  <img src="assets/img/selectok.png" class="selectall" alt="" *ngIf="allof">
                  全选
                </div>
                <div class="footer-bar-right" (click)="activation?cancelCollectNailAPI():null">删除</div>
            </div>
          </ion-footer>
        </ion-grid>  
      </div>
          <!-- 无内容 -->
          <div  class="contentwrap wrap1" *ngIf="flag1">
              <div>
                <img src="assets/img/wuwangluo.png" alt="">
                  <p>网络好像出问题了</p>
                  <div class="wrap">
                      <button ion-button round class="load" outline (click)="reload()">刷新试试</button>
                  </div> 
                </div>
          </div>
          <!-- 无内容 -->
          <div class="contentwrap wrap2" *ngIf="flag2==true">
              <div>
                <img src="assets/img/组3.png" alt="">
                  <p>还没有收藏哦</p>
                  <div class="wrap">
                      <button ion-button round class="load" outline (click)="home()">去首页逛逛</button>
                  </div> 
              </div>
          </div>
    </ion-slide>

    <!--服务-->
    <ion-slide>
      <div *ngIf="!flag3" class="list">
       <ion-grid>
            <!-- 有内容 -->
            <ion-row>
              <ion-col col-4 class="mycollpid" *ngFor="let value of serviceList,let j=index" (click)="activation?selectCLI1(j):showGoodsDetail2(value.service_id)">
                <img src="{{value.selectimg}}" class="imgcoll" *ngIf="activation==true">
                <div class="servicePic">
                  <img src="{{picrooturl}}{{value.service_image}}" width="100%" height="80%">
                </div>
                <div class="service">
                  <span class="serName">{{value.service_name}}</span>
                  <span class="serPrice">{{value.service_price}}</span>
                </div>
              </ion-col>
            </ion-row>
        
            <ion-footer *ngIf="activation==true">
              <div class="footer-bar">
                  <div class="footer-bar-left" (click)="activation?selectall1():null">
                    <img src="assets/img/selectno1.png" class="selectall" alt="" *ngIf="!allof1"/>
                    <img src="assets/img/selectok.png" class="selectall" alt="" *ngIf="allof1">
                    全选
                  </div>
                  <div class="footer-bar-right" (click)="activation?cancelCollectNailAPI1():null">删除</div>
              </div>
            </ion-footer>
        </ion-grid>
     </div>   
         <!-- 无内容-->
          <div  class="contentwrap wrap1" *ngIf="flag1">
              <div>
                <img src="assets/img/wuwangluo.png" alt="">
                  <p>网络好像出问题了</p>
                  <div class="wrap">
                      <button ion-button round class="load" outline (click)="reload()">刷新试试</button>
                  </div> 
                </div>
          </div>
           <!-- 无内容-->
          <div class="contentwrap wrap2" *ngIf="flag3">
              <div>
                <img src="assets/img/组3.png" alt="">
                  <p>还没有收藏哦</p>
                  <div class="wrap">
                      <button ion-button round class="load" outline (click)="home()">去首页逛逛</button>
                  </div> 
              </div>
          </div>
    </ion-slide>
  </ion-slides>
      
</ion-content>
  
  